<template>
    <view class="scroll_item">
        <image v-if="item.image" :src="$util.img(item.image)" mode="" class="head-image"></image>
        <image v-else :src="staticImgUrl + 'home/load_img.png'" mode="" class="head-image"></image>
        <view class="broadcast-box">
            <view class="hot-header" v-if="item.is_notice==0">
                <view class="hot-header-number">
                    <image :src="$util.imgPath(`recomm_${item.pushing}.png`)" mode="" v-if="item.pushing==0" style="width:41upx" class="head-status"></image>
                    <image :src="$util.imgPath(`recomm_${item.pushing}.png`)" mode="" v-else  class="head-status"></image>
                    {{item.views}}观看
                </view>
            </view>

            <view class="hot-header" v-else>
                <view class="hot-header-number">
                    <image :src="$util.imgPath('recomm_2.png')" mode="" style="width:'41upx'" class="head-status"></image>
                    {{$util.formatDateCount(item.starttime1*1000,'M.D h:m')}}
                </view>
            </view>

            <view class="hot-bottom">
                <view>
                    <!-- <view class="hot-bottom-shop">
                        <block v-for="(v, i) in item.goods" :key="i">
                            <image :src='$util.img(v.sku_image)' mode=""></image>
                        </block>
                    </view> -->

                    <view class="hot-bottom-store">
                        <image v-if="!item.thumb" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg" mode=""></image>
                        <image v-else :src="$util.img(item.thumb)" mode=""></image>
                        {{item.name }}
                    </view>
                </view>

                <!-- <view class="hot-bottom-heart">
                    :ref="`liveHeart-${inx}`"
                    <likeButton :ref="`liveHeart-${item.id}`" @handleClick='handleClick' :throttle="50" :large="false" src="/static/images/live-heart-1.png" :width="30" :height="30" :imgWidth='30' :imgHeight='30' :site='[0,20]' :showImgs='showImgs' />
                </view> -->
            </view>
        </view>
    </view>
</template>

<script>
// import likeButton from '@/livePages/components/like-button.vue'
export default {
	data() {
		return {
			showImgs: [
				'https://xmgts.kanfoshan.cn/public/static/images/live-heart-1.png',
				'https://xmgts.kanfoshan.cn/public/static/images/live-heart-2.png',
				'https://xmgts.kanfoshan.cn/public/static/images/live-heart-3.png'
			],
			time: 2000,
			look: false
		}
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	components: {
		// likeButton
	},
	methods: {
		play(speed) {
			if (this.$refs['liveHeart-' + this.item.id]) {
				setTimeout(() => {
					this.$refs['liveHeart-' + this.item.id].handleClick()
				}, speed)
			}
		},
		handleClick() {
			this.time = Math.floor(Math.random() * 15) * 1000
			this.play(this.time)
		}

	},
	mounted() {
		this.play()
	}
}
</script>

<style lang="scss">
.scroll_item {
    position: relative;
    width: 320upx;
    height: 568upx;
    margin-right: 18upx;
    border-radius: 8upx;
    .head-image {
        height: 100%;
        border-radius: 8upx;
    }

    .broadcast-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .hot-header {
            display: flex;
            margin: 5px;
            .hot-header-number {
                // background-color: rgba(0, 0, 0, 0.4);
                background-color: rgba(0, 0, 0, 0.4);
                border-radius: 16upx;
                font-size: 20upx;
                color: #fff;
                padding-right: 10upx;
                display: flex;
                flex-direction: row;
                align-items: center;
                line-height: 0;
                .head-status {
                    width: 31upx;
                    height: 31upx;
                    margin-right: 5upx;
                }
            }
        }
        .hot-bottom {
            background-color: rgba(0, 0, 0, 0.4);
            padding: 10upx;
            position: relative;
            .hot-bottom-shop {
                image {
                    width: 50upx;
                    height: 50upx;
                    border-radius: 50%;
                    margin-right: 10upx;
                }
            }
            .hot-bottom-store {
                display: flex;
                flex-direction: row;
                align-items: center;
                font-size: 22upx;
                color: white;
                image {
                    width: 30upx;
                    height: 30upx;
                    border-radius: 50%;
                }
            }
            .hot-bottom-heart {
                position: absolute;
                right: 32upx;
                top: 14upx;
            }
        }
    }
}
</style>
